extends common/layout
block content
    link(rel='stylesheet' type='text/css' href='../css/flatpickr.min.css')
    link(rel='stylesheet' type='text/css' href='../css/shop.min.css')
    link(rel='stylesheet' type='text/css' href='../css/issue-project-info.min.css')
    link(rel='stylesheet' type='text/css' href='../css/zTreeStyle.css')
    include common/head
    div.issue-project-info-container.shop-container
        include common/nav
        div.seller-content
            div.main-wrap
                p.title 发布宝贝
                div.info-cont
                    p.cate-title
                        span 类目：流行男鞋>>低帮鞋
                        a.red-font(href="issueProject.html") 切换类目
                    div.basic-info
                        p.info-title 1.宝贝基本信息
                        div.input-group
                            div.input-item.clearfix
                                p.tip-name
                                    span.red-font *
                                    span 宝贝类型
                                div.radio-content
                                    label
                                        input(type="radio")
                                        | 全新
                                    label
                                        input(type="radio")
                                        | 二手
                            div.input-item.clearfix
                                p.tip-name.pad-top
                                    span.red-font *
                                    span 宝贝标题
                                div.text-content
                                    input(type="text" placeholder="不超过30个字")
                                    span 0/30
                            div.input-item.clearfix
                                p.tip-name
                                    span.red-font *
                                    span 电脑端宝贝图片
                                div.img-content
                                    p.tip-img 宝贝主图大小不能超过3MB。
                                    div.img-group.clearfix
                                        div.img-item(data-toggle="modal" data-target="#imageModal")
                                            div.null-img-cont.hidden
                                                span +
                                                div.dis-block
                                                    span.red-font *
                                                    span 宝贝主图
                                            div.img-cont
                                                img(src="../image/main2.png")
                                        div.img-item(data-toggle="modal" data-target="#imageModal")
                                            div.null-img-cont
                                                span +
                                        div.img-item(data-toggle="modal" data-target="#imageModal")
                                            div.null-img-cont
                                                span +
                                        div.img-item(data-toggle="modal" data-target="#imageModal")
                                            div.null-img-cont
                                                span +
                                        div.img-item(data-toggle="modal" data-target="#imageModal")
                                            div.null-img-cont
                                                span +
                            div.input-item.clearfix
                                p.tip-name
                                    span 宝贝规格
                                div.spec-content
                                    div.spec-opt
                                        div.spec-item
                                            p.tip-spec 颜色
                                            div.checkbox-group
                                                label
                                                    input(type="checkbox" value="白色")
                                                    | 白色
                                                label
                                                    input(type="checkbox" value="黑色")
                                                    | 黑色
                                                label
                                                    input(type="checkbox" value="红色")
                                                    | 红色
                                        div.spec-item(data-id="checkbox-5")
                                            p.tip-spec 尺码
                                            div.checkbox-group
                                                label
                                                    input(type="checkbox" value="S码")
                                                    | S码
                                                label
                                                    input(type="checkbox" value="M码")
                                                    | M码
                                                label
                                                    input(type="checkbox" value="L码")
                                                    | L码
                                                label
                                                    input(type="checkbox" value="XL码")
                                                    | XL码
                                        div.spec-item(data-id="checkbox-7")
                                            p.tip-spec 鞋码
                                            div.checkbox-group
                                                label
                                                    input(type="checkbox" value="S码")
                                                    | 25
                                                label
                                                    input(type="checkbox" value="M码")
                                                    | 26
                                                label
                                                    input(type="checkbox" value="L码")
                                                    | 27
                                                label
                                                    input(type="checkbox" value="XL码")
                                                    | 28
                                    div.spec-desc.hidden
                                        p.tip-spec
                                            span 宝贝销售规格
                                            i
                                        p.gray-font 该类目下：颜色分类、尺码，请全选或全不选，如果只选一部分则无法保存对应的价格和库存；库存为0的宝贝规格，在商品详情页不展示
                                        div.input-block.clearfix
                                            span 批量填充：
                                            div.input-text
                                                input(type="text" placeholder="价格")
                                                input(type="text" placeholder="数量")
                                                button.btn-border-orange 确定
                                            div.table-cont.table-wrap
                                                table
                                                    thead
                                                        tr
                                                            td.color 颜色
                                                            td.size 尺码
                                                            td *价格(元)
                                                            td *数量(件)
                                                    tbody

                            div.input-item.clearfix
                                p.tip-name
                                    span.red-font *
                                    span 一口价及总库存
                                div.table-content
                                    table
                                        thead
                                            tr
                                                td *价格(元)
                                                td *总数量(件)
                                        tbody
                                            tr
                                                td
                                                    input(type="text")
                                                td
                                                    input(type="text")
                            div.input-item.clearfix
                                p.tip-name
                                    span.red-font *
                                    span 宝贝描述
                                div.text-content
                                    textarea
                            div.input-item.clearfix
                                p.tip-name
                                    span.red-font *
                                    span 宝贝分类
                                div.class-content
                                    div.class-desc
                                        div.item-class
                                            div.level-1
                                                span 一级分类
                                                i.icon.icon-arrow-black-up
                                            div.level-2
                                                p
                                                    label
                                                        input(type="checkbox")
                                                        | 二级分类
                                                p
                                                    label
                                                        input(type="checkbox")
                                                        | 二级分类
                                        div.item-class
                                            div.level-1
                                                span 一级分类
                                                i.icon.icon-arrow-black-up
                                            div.level-2
                                                p
                                                    label
                                                        input(type="checkbox")
                                                        | 二级分类
                                                p
                                                    label
                                                        input(type="checkbox")
                                                        | 二级分类
                                                p
                                                    label
                                                        input(type="checkbox")
                                                        | 二级分类
                                                p
                                                    label
                                                        input(type="checkbox")
                                                        | 二级分类
                                                p
                                                    label
                                                        input(type="checkbox")
                                                        | 二级分类
                                                p
                                                    label
                                                        input(type="checkbox")
                                                        | 二级分类
                                                p
                                                    label
                                                        input(type="checkbox")
                                                        | 二级分类
                                                p
                                                    label
                                                        input(type="checkbox")
                                                        | 二级分类
                                                p
                                                    label
                                                        input(type="checkbox")
                                                        | 二级分类
                                                p
                                                    label
                                                        input(type="checkbox")
                                                        | 二级分类

                    div.logistics-info
                        p.info-title 2.宝贝物流服务
                        div.input-group
                            div.input-item.clearfix
                                p.tip-name.pad-top
                                    span 运费模板
                                div.select-content
                                    div.select-block
                                        select
                                            option 请选择运费模板
                                    a.btn-border-orange 新建运费模板
                            div.input-item.clearfix
                                p.tip-name.pad-top
                                    span 物流参数
                                div.sip-content
                                    p
                                        span.red-font *
                                        span.width-font 物流体积(m³)
                                        input(type="text")
                                    p
                                        span.red-font *
                                        span.width-font 物流重量(kg)
                                        input(type="text")
                    div.after-sale-info
                        p.info-title 3.售后保障信息服务
                        div.input-group
                            div.input-item.clearfix
                                p.tip-name
                                    span 售后服务
                                div.checkbox-content
                                    p
                                        label
                                            input(type="checkbox")
                                            | 提供发票
                                    p
                                        label
                                            input(type="checkbox")
                                            | 保修服务
                                    p
                                        label
                                            input(type="checkbox")
                                            | 退换货承诺：凡使用支付宝服务付款购买本店商品，若存在质量问题或与描述不符，本店将主动提供退换货服务并承担来回邮费
                                    p
                                        label
                                            input(type="checkbox")
                                            span 服务承诺：该类商品，必须支持【七天退货】服务，承诺更好服务可通过
                                            span.red-font 【交易合约】
                                            span 设置
                    div.rest-info
                        p.info-title 4.宝贝其他信息
                        div.input-group
                            div.input-item.clearfix
                                p.tip-name
                                    span 库存技术
                                div.radio-content
                                    label
                                        input(type="radio")
                                        | 买家拍下减库存
                                    label
                                        input(type="radio")
                                        | 买家付款减库存
                            div.input-item.clearfix
                                p.tip-name
                                    span 有效期
                                div.radio-content
                                    label
                                        input(type="radio")
                                        | 7天
                            div.input-item.clearfix
                                p.tip-name
                                    span.red-font *
                                    span 上架时间
                                div.radio-content
                                    label
                                        input(type="radio")
                                        | 立即发布
                                    label
                                        input(type="radio")
                                        span 定时发布
                                        input.calendar(type="text" placeholder="年月日，时分" data-enable-time=true data-time_24hr=true data-enable-seconds=true data-min-date="today")
                                    label
                                        input(type="radio")
                                        | 放入仓库
                            div.input-item.clearfix
                                p.tip-name
                                    span 橱窗推荐
                                div.radio-content
                                    label
                                        input(type="radio")
                                        | 是
                                    label
                                        input(type="radio")
                                        span 否
                                        span.gray-font 您的橱窗使用情况：共【10】个，已用【1】个
                    div.btn-container
                        button.btn-orange 发布
                div.success-cont.hidden
                    p
                        span 您的宝贝成功发布，您可在
                        a.red-font 宝贝管理
                        span 中查看您的宝贝！
    div.modal.fade.imageModal(id="imageModal")
        div.modal-dialog
            div.modal-content
                div.modal-header
                    span 图片空间
                    button.close(type="button" data-dismiss="modal") &times;
                div.modal-body.clearfix
                    div.menu-l
                        ul.ztree(id="tree")
                        div.href-block
                            a(href="imageSpace.html") 进入图片管理
                    div.image-r
                        div.btn.btn-file 选择上传图片
                            input(type="file")
                        div.row-wrap(id="myAwesomeDropzone")
                            div.item-group.clearfix
                                -for(var i = 0; i < 10; i++) {
                                div.item-wrap
                                    div.opt-item
                                        div.img-wrap
                                            img(data-dz-thumbnail src="../image/main2.png")
                                        p.file-name(data-dz-name)
                                        input(type="radio" name="image")
                                -}
                                div.null-list-wrap.hidden
                                    img(src="../image/icon_pic.png")
                                    p 将文件拖放到此窗口即可上传
                                    p 仅支持3M以内jpg、jpeg、gif、png格式上传


    script(src = "../js/jquery.ztree.core.min.js")
    script(src="../js/page.js")
    script(src="../js/dropzone.min.js")
    script(src="../js/flatpickr.min.js")
    script(src="../js/flatpickr.zh.js")
    script.

        $(".calendar").flatpickr();
        var template = '<div class="item-wrap"><div class="opt-item"><div class="img-wrap"><img data-dz-thumbnail src=""></div><p class="file-name" data-dz-name></p><input type="radio" name="image"></div></div>';

        var data = new FormData();
        var id = 10;
        data.append('id', id);
        $(".item-group").dropzone({
            url: "/file/post",
            maxFiles: 10,
            maxFilesize: 5,
            paramName:"image",
            acceptedFiles: "image/*",
            previewTemplate: template,
            params:data,
            init:function () {
                this.on("addedfile", function (file, res) {
                    $(".null-list-wrap").remove();
                })
            }
        });

        $(".checkbox-group input").change(function () {
            var length = $(".spec-item").length;
            var specGroup = [];
            var checkLength = $(".checkbox-group input:checked").length;
            var head = "";
            for (var i = 0; i < length; i++) {
                var specCheckedGroup = [];
                $(".spec-item").eq(i).find("input:checked").each(function () {
                    specCheckedGroup[specCheckedGroup.length] = $(this).parent().text();
                })
                if(specCheckedGroup.length != 0) {
                    specGroup[i] = specCheckedGroup;
                    head += '<td>' + $(".spec-item").eq(i).find(".tip-spec").text() + '</td>';
                }
            }
            var result = descartes(specGroup);
            formatTable(result, head)
            if (checkLength == 0) {
                $(".spec-desc").addClass("hidden");
            } else {
                $(".spec-desc").removeClass("hidden");
            }
        })

        function formatTable(list, head) {
            $(".table-wrap table").empty();
            $(".table-wrap table").append('<thead><tr>'+head+'<td>*价格(元)</td><td>*数量(件)</td></tr></thead>');
            $.each(list, function (i, item) {
                var html = "";
                $.each(item, function (i, v) {
                    html += '<td>'+ v +'</td>';
                });
                $(".table-wrap table").append('<tbody><tr>'+ html +'<td><input type="text"></td><td><input type="text"></td></tr></tbody>');
            })
        }

        $(".level-1").on("click", function () {
            var level2 = $(this).next(".level-2");
            if (level2.is(":visible")) {
                level2.hide();
            }else {
                level2.show();
            }
        })

        var treeObj;
        var setting = {
            view: {
                showIcon: false
            },
            callback: {
                onClick: zTreeOnClick
            }
        };
        var zNodes = [
            {
                id: 10,
                name: "我的图片",
                open: true,
                children: [
                    {
                        id: 111,
                        name: "宝贝图片",
                        children: [
                            {
                                id: 123,
                                name: "测试"
                            }
                        ]
                    },
                    {
                        id: 112,
                        name: "店铺装修",
                        children: [
                            {
                                id: 124,
                                name: "轮播图"
                            },
                            {
                                id: 125,
                                name: "商品图"
                            },
                            {
                                id: 126,
                                name: "商品图"
                            }
                        ]
                    }
                ]
            }
        ];
        treeObj = $.fn.zTree.init($(".ztree"), setting, zNodes);
        treeObj.selectNode(treeObj.getNodeByParam("id", 10));

        function zTreeOnClick(event, treeId, treeNode) {
            alert(treeNode.id + ", " + treeNode.name);
        };

        
        $("#imageModal .opt-item").click(function () {
            $("#imageModal").find("input[type='radio']").hide();
            $(this).find("input[type='radio']").show();
            $(this).find("input[type='radio']").get(0).checked = true;
            $("#imageModal").modal("hide");
        })

        //页面滚动执行事件
        $(".row-wrap").scroll(function () {
            loadMore($(this), function () {
                var result = "";
                for (var i = 0; i < 20; i++) {
                    result += '<div class="item-wrap"><div class="opt-item"><div class ="img-wrap"><img src="../image/main2.png"></div><p class="file-name">700 * 700</p><input type="radio" name ="image"></div></div>'
                }
                setTimeout(function () {
                    //$(".load-more").remove();
                    $('.item-group').append(result);
                    page += 1;
                    finished = 0;
                    console.log(page);
                    //最后一页
                    if (page == 10) {
                        sover = 1;
                        loadOver();
                    }
                }, 1000);
            });
        });
